7.08 元素类名的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z1{color:black;font-size:16px}
.z2{color:red;font-size:24px}
.z3{width:200px;height:100px;border:2px solid black}
</style>
</head>
<body>
<div id="wyzxw" class="z1 z2 z3">
我要好好学习
</div>
<script type="text/javascript">
var z=document.getElementById("wyzxw")
<!--1、toggle在相同类名时执行删除，没有相同类名时执行添加-->
z.classList.toggle("z2") //此时括号内不能有两个类名，否则不会生效
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z1{color:black;font-size:16px}
.z2{color:red;font-size:24px}
.z3{width:200px;height:100px;border:2px solid black}
</style>
</head>
<body>
<div id="wyzxw" class="z1 z2 ">
我要好好学习
</div>
<script type="text/javascript">
var z=document.getElementById("wyzxw")
<!--2、toggle强制执行或添加-->
<!--语法：元素.classList.toggle("类名",布尔值)-->
<!--第2个参数为：true 执行添加-->
<!--第2个参数为：false 执行删除-->
z.classList.toggle("z2",false)
z.classList.toggle("z3",true)
</script>
</body>
</html>
返回值同上